<template>
  <div>
    <div :id="id" :style="style"></div>
  </div>
</template>
<script>
  // 引入 ECharts 主模块
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/line');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');

  export default {
    props: {
      id: {
        type: String,
        default: 'chartLine'
      },
      height: {
        type: [String, Number],
        default: '400'
      },
      width: {
        type: [String, Number],
        default: '600'
      },
      chartData: {
        type: Object,
        validator: function (value) {
          return value.data && value.value;
        },
        required: true
      },
      isYInverse: {
        type: [Boolean, String],
        default: false
      },
      xposition:{
        type: String,
        default: 'bottom'
      },
      seriesISColor:{
        type: [String, Number],
        default: '#f04849'
      }
    },
    computed: {
      style: function () {
        return {width: this.width, height: this.height}
      },
      option: function () {
        return {
          xAxis: {
            type: 'category',
            data: this.optionData,
            boundaryGap: false,
            position: this.xposition,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {   // 坐标轴相关
              onZero: true,   // 是否对齐y轴0坐标
              lineStyle: {   //  坐标轴线线的颜色。
                color: '#ffffff'
              }
            },
            splitLine: { //网格线
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            nameTextStyle: {   //坐标轴名称的文字样式。
              fontSize: 28
            },
            axisLabel: {     //坐标轴刻度标签的相关设置。
              fontSize: 28
            }
          },
          yAxis: {
            type: 'value',
            show: true,
            inverse: this.isYInverse,   // 反转
            // interval: 25,
            // max: 150,
            axisLine: {   // 坐标轴相关
              show: false,
              lineStyle: {   //  坐标轴线线的颜色。
                color: '#ffffff'
              }
            },
            axisLabel: {     //坐标轴刻度标签的相关设置。
              show: false,
              fontSize: 28
            },
            axisTick: {       // 刻度
              show: false
            },
            splitLine: { //网格线
              show: false
            },
            nameTextStyle: {
              fontSize: 28
            },


          },
          series: [{
            data: this.optionValue,
            type: 'line',
            itemStyle: {
              normal: {
                color: this.seriesISColor,
              }
            },
            // symbol: emptyCircle, //折线之间的圆点或者别的
            symbolSize: 9,
            lineStyle: {
              width: 8
            },
            label: {
              show: true,
              position: 'top',
              color: 'auto',
              fontSize: 28
            }
          }],
          backgroundColor: '#092f41',
          animation: false
          // textStyle:{  // 默认全局字体颜色
          // color: '#ffffff'
          // }

        }
      }

    },
    watch: {
      chartData: {
        handler: function (val, oldVal) {    // 监听charData，当发生变化时，触发这个回调函数绘制图表
          console.log('line:--');
          this.optionData = val.data
          this.optionValue = val.value
          this.draw()
        },
        deep: true
      }
    },
    data() {
      return {
        myEcharts: {},
        optionData: [],
        optionValue: []
      };
    },
    methods: {
      draw() {
        // 基于准备好的dom，初始化echarts实例
        this.myEcharts = echarts.init(document.getElementById(this.id));
        // 绘制图表
        this.myEcharts.setOption(this.option)
      }
    },
    mounted() {
      this.draw();
    }

  };
</script>
<style lang="less" scoped>
</style>
